<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/simple-nav :: nav}">
</head>

<link href="../../css/custom/blog-article-display.css" th:href="@{/css/custom/blog-article-display.css}" rel="stylesheet">
<!-- thinker-md CSS -->
<body>
<!-- Page Content -->

<div class="container blog-content-container">

    <div class="row">
        <!-- Blog Entries Column -->
        <div class="col-md-8">

            <!-- Blog Post -->
            <div class="card mb-4">
                <div class="card-block">
                    <h2 class="card-title">
							<span>
                                <!--用户主页链接-->
			                  <a href="/space/xuef1991" title="xuef1991" th:href="'/space/' + ${user.username}"
                                 th:title="${user.username}">
                                  <!--用户头像-->
                                  <!--
			                    <img src="/images/avatar-defualt.jpg"
                                     th:src="${user.avatar} == null ? '/images/avatar-defualt.jpg' : ${user.avatar}"
                                     class="blog-avatar-50">
                                     -->
			                  </a>
					        </span>
                            <!--博文标题行-->
                            <a href="/space/xuef1991/blogs/1" class="card-link" title="..."
                                th:href="'/space/' + ${user.username} + '/blogs/'+ ${blogModel.id}"
                               th:title="${user.username}" th:text="${blogModel.title}">
                                解决问题的几种模式...
                            </a>
                    </h2>
                    <div class="card-text">
                        <div class="avatar-box-sm">
                            <img class="avatar-photo" th:src="${user.headUrl}" />
                        </div>
                        <div class="blog-title-box">
                            <a href="/space/xuef1991" th:href="'/space/' + ${user.username}" class="card-link"
                               th:text="${user.username}" >anonymous</a>
                            <!--如果访问者是博文所有者，则提供编辑和删除入口。当然，后端还是要验证用户身份的-->
                             <a href="/space/xuef1991" th:if="${isBlogOwner}"
                                th:href="'/space/' + ${user.username}+ '/blogs/edit/'+ ${blogModel.id}"
                                class="btn btn-info float-center btn-sm blog-edit-blog">
                                 edit
                             </a>
                             <a href="javascript:void(0)" th:if="${isBlogOwner}" class="btn btn-warning btn-sm float-center blog-delete-blog">
                                 Del
                             </a>
                            <br/>
                            <span class="blog-desc">[[${#dates.format(blogModel.createTime, 'yyyy-MM-dd HH:mm')}]]</span>
                        	<span class="blog-desc">阅读-</span>([[${blogModel.readCount}]])~
		                    <span class="blog-desc">喜欢-</span>([[${blogModel.likeCount}]])~
		                    <span class="blog-desc">评论-</span>([[${blogModel.commentCount}]])
                        </div>
                    </div>
                    <hr>
                    <article class="post-content" th:utext="${blogModel.htmlContent}">
                       
                	</article>
                    <hr>
                </div>
                <div class="card-block blog-comment-btn-group">
                    <h3><a href="javascript:void(0)" th:abbr="'blogId='+${blogModel.id}" th:if="${like} == null"
                           class="btn btn-info btn-sm float-right" id="blog-like">like</a></h3>
                    <h3><span class="badge-danger float-center" th:text="我喜欢这篇博文" th:if="${like}"></span>
                        <a href="javascript:void(0)" th:abbr="'blogId='+${blogModel.id}" th:if="${like}"
                           class="btn btn-info btn-sm float-right" id="blog-dislike">cancel</a></h3>
                </div>
                <div class="card-block">
                    <h5>分类：<a th:href="'/space/'+${user.username} + '/blogs?catalog='+${blogModel.catalog.id} "
                              th:text="${blogModel.catalog.name}">
                        Spring Data
                    </a></h5>

                    <h5 >标签：
                        <a th:each="tag : ${#strings.arraySplit(blogModel.tags , ',')}"
                           th:href="'/space/' + ${user.username}  + '/blogs?keyword='+ ${tag}">
                            <span class="badge badge-default" th:text="${tag}">Linux</span>
                        </a>
                    </h5>
                </div>

                <div class="card-block">
                    <h5>评论：</h5>
                    <div class="row">
                        <div class="col-lg-12">
                            <textarea class="blog-textarea" placeholder="说点什么~" id="commentContent"></textarea>
                        </div>
                    </div>
                    <button class="btn btn-primary btn-sm float-right" id="submitComment">发表</button>
                </div>
                <div class="card-block" id="mainContainer">
                    <div class="row" id="mainContainerRepleace" th:each="commentvo, commentIdx : ${comments}" th:object="${commentvo}">
                        <h5 class="card-title col-lg-1 col-md-2">
							<span>
			                  <a href="/space/xuef1991" th:href="'/space/'+ ${commentvo.comment.user.username}" title="xuef1991"
                                 th:title="${commentvo.comment.user.username}">
			                    <img src="/images/avatar-defualt.jpg"
                                     th:src="${commentvo.comment.user.headUrl} == null ? 'http://p92lxdjid.bkt.clouddn.com/eaadeb1f-10b2-46e1-8c23-fbcb379625ab.jpg' :
                                        ${commentvo.comment.user.headUrl}" class="blog-avatar-50">
			                  </a>
					        </span>
                        </h5>
                        <div class="card-text col-lg-11 col-md-10">
                            <a href="/space/xuef1991" th:href="'/space/'+ ${commentvo.comment.user.username}" class="card-link"
                               th:text="${commentvo.comment.user.username}">xuef1991</a>
                            [[${commentIdx.index} + 1]]#  [[${#dates.format(commentvo.comment.createTime, 'yyyy-MM-dd HH:mm')}]]
                            <a href="javascript:void(0)" class="blog-delete-comment" th:if="${commentvo.Owner}"
                               th:attr="commentId=${commentvo.comment.id}"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
                            <p th:text="${commentvo.comment.content}">~~~</p>
                        </div>
                    </div>

                </div>
            </div>

        </div>

        <!-- 右侧栏目 -->

        <div class="col-md-4">
            <div id="blog-article">
                <!-- 文章目录 -->
                <div class="card table-of-contents">
                    <h5 class="card-header">目录</h5>
                    <div class="card-block">
                        <div class="row">
                            <div id="catalog" class="col-lg-12"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- /.row -->
</div>
<!-- /.container -->


<div th:replace="~{fragments/footer :: footer}">...</div>

<!-- JavaScript -->
<script th:inline="javascript">
    $(function () {
        $("#tobeAdded").addClass("active");
    });
var blogId = [[${blogModel.id}]];
var blogUrl = '/space/' + [[${user.username}]] + '/blogs/'+ [[${blogModel.id}]] ;
</script>
<script src="../../js/userspace/blog.js" th:src="@{/js/userspace/blog.js}"></script>
</body>
</html>